<template>
  <PageWrapper class="high-form">

    <CollapseContainer>
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="handleCreate"> 新增 </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction :actions="[
              {
                tooltip: '修改',
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
              },
              {
                tooltip: '删除',
                icon: 'ant-design:delete-outlined',
                color: 'error',
                onClick: (e) => { e.stopPropagation(); },
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record.id),
                  placement: 'left'
                },
              },
            ]" />
          </template>
        </template>
      </BasicTable>
      <AddUserModal @register="registerAddUserModal" @success="handleAddUserSuccess" />
    </CollapseContainer>


  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container';
import { PageWrapper } from '/@/components/Page';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';

import { list, del, } from '/@/api/work/workrole';
import { columns } from './data';
import AddUserModal from './AddUserModal.vue';

export default defineComponent({
  name: 'Group',
  components: { CollapseContainer, PageWrapper, BasicTable, TableAction, AddUserModal, },
  setup() {

    const [registerAddUserModal, { openModal: openUserModal }] = useModal();

    const [registerTable, { reload }] = useTable({
      title: '流程角色列表',
      api: list,
      columns,
      formConfig: {
        labelWidth: 120,
        showAdvancedButton: false,
        showResetButton: false,
        autoSubmitOnEnter: true,
      },
      canColDrag: true,
      bordered: true,
      showIndexColumn: false,
      actionColumn: {
        width: 160,
        title: '操作',
        dataIndex: 'action',
        fixed: false,
      },
    });


    function handleAddUserSuccess() {
      setTimeout(() => {
        reload();
      }, 200);
    }

    function handleCreate(record: Recordable) {
      openUserModal(true, {
        record,
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      openUserModal(true, {
        record,
        isUpdate: true,
      });
    }

    function handleDelete(id) {
      del(id).then(() => {
        reload();
      });
    }


    return {
      registerTable, registerAddUserModal, handleAddUserSuccess,
      handleCreate, handleEdit, handleDelete,
    };
  },
});
</script>
